<template>
	<div class="echart" id="main" :style="{ width: '100%', height: '500px' }"></div>
</template>

<script>
import { toRefs, reactive } from 'vue';
import * as echarts from 'echarts';

export default {
	name: 'statisticalStatus',
	components: {},

	setup() {
		const state = reactive({
			status: ['已登记', '已入库', '已借调', '已发还','已移交', '已回库', '其他出库'],
		});

		function echartInit(organData) {
			var _data = new Array();
			_data.push(organData.register);
			_data.push(organData.warehoused);
			_data.push(organData.seconded);
			_data.push(organData.checked);
			_data.push(organData.returned);
			//_data.push(organData.destroyed);
			_data.push(organData.handedOver);
			_data.push(organData.back);
			_data.push(organData.issued);

			var myChart = echarts.init(document.getElementById('main'));
			var option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: state.status,
					axisTick: {
						alignWithLabel: true,
					},
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						name: organData.organName,
						data: _data,
						type: 'bar',
						barWidth: '40%',
						itemStyle: {
							normal: {
								color: function (params) {
									var colorlist = ['#d7a02b', '#E67716', '#FBC300', '#11440f', '#32585a', '#c8ba23', '#cca272', '#74608f', '#d7a02b', '#c8ba23'];
									return colorlist[params.dataIndex];
								},
							},
						},
					},
				],
			};
			myChart.setOption(option);
		}

		return {
			echartInit,
			...toRefs(state),
		};
	},
};
</script>
